

import { createApp } from "vue";
import TradingTable from "@/content-scripts/components/table/TradingTable.vue";
import Antd from "ant-design-vue";
import { post } from "@/http/http";
import { transnRecordCol } from '@/content-scripts/components/table/columns/perpetualColumns.js'
import { language } from "@/content-scripts/locales";
import { getElement } from '@/content-scripts/getElement.js'

let perpetualApp = null

export function createTableBottomPerpetual(params = {}) {
    localStorage.setItem('pagePagination', JSON.stringify({ current: params.current, size: params.pageSize, isChange: false }))
    console.log(params, 'createTableBottomPerpetual params');

    let interval = setInterval(async () => {
        const container = getElement("perpetual.table.container")[0]
        
        console.log(container, '2222222222229999999999999');
        console.log(document.querySelector(".scroll-table-bottom-box > .table-scroll-window > div > .tr-table__wrapper"));
        console.log(document.querySelector('.scroll-table-bottom-box > .table-scroll-window > .tr-table__wrapper'));


        // const table = container.querySelector('.tr-trade__table')
        // table.style.display = 'none'
        // 请求接口，获取数据
        // params是修改的数据


        if (!container) {
            console.log('未找到.scroll-table-bottom-box > .table-scroll-window > div > .tr-table__wrapper，表格区域');
            return
        }
        clearInterval(interval)
        // const { tableSource, tableColumns } = await getBottomTableList(params)
        let tableSource = []
        let tableColumns = 0
        if (params.firstStageTabs.includes(language.tradeHistory)) {
            // chrome.runtime.sendMessage({
            //     type: "proxy",
            //     method: "POST",
            //     // url: `/user/trade/order/page`,
            //     url: '/user/history/order/page',
            //     body: { ...params, id: JSON.parse(localStorage.getItem('userInfo')).id }
            //   }, (response) => {
            //     const data = JSON.stringify(response.data)
            //     console.log(data,'JSON.stringify(response.data)lililili');


            //     console.log(`[代理响应/user/trade/order/page] 状态: ${response.code}, 数据: ${JSON.stringify(response.data)}`);
            //   });
            params.startTime = params.startTimeValue
            params.endTime = params.endTimeValue
            const dataSource = await post('/user/history/order/page', { ...params, id: JSON.parse(localStorage.getItem('userInfo')).id })
            console.log(dataSource, 'dataSource');
            tableSource = dataSource.data
            tableColumns = transnRecordCol
            const existingOverlay = container.querySelector(".my-perpetual-table-overlay");
            if (existingOverlay) {
                existingOverlay.remove();
            }

            const overlay = document.createElement("div");
            overlay.setAttribute("class", "my-perpetual-table-overlay");
            overlay.setAttribute(
                "style",
                "position: absolute;\n" +
                " left: 0;\n" +
                " top: 0;\n" +
                " width: 100%;\n" +
                " height: 100%;\n" +
                " z-index: 35;\n"
            );

            const tableStyle = {
                // fontSize: "12px",
                color: "#8e949e",
                // background: "#F8F9FB",
            };
            if (tableSource.total != 0) {
                // 挂载元素
                const appContainer = document.createElement("div");

                perpetualApp = createApp(TradingTable);
                perpetualApp.provide("tableSource", tableSource.records);
                perpetualApp.provide("tablePagination", tableSource);
                perpetualApp.provide("tableColumns", tableColumns);
                perpetualApp.provide("tableStyle", tableStyle);
                perpetualApp.use(Antd);
                perpetualApp.mount(appContainer);
                console.log("TradingTable");

                container.style.position = "relative";
                overlay.appendChild(appContainer);
                container.appendChild(overlay);
            }

        }

    }, 100)


}



// async function getBottomTableList(params) {
//     let tableSource = ref([])
//     let tableColumns = ref([])
//     // if (params.firstStageTabs.includes('仓位')) {
//     //     if (params.detailsListValue == '列表') {
//     //         const dataSource = await get('/perpetual/position/list', params)
//     //         console.log(dataSource, 'dataSource');
//     //         tableSource = dataSource.data
//     //         tableColumns = positionCol
//     //     }
//     // }
//     // if (params.firstStageTabs.includes('历史仓位')) {
//     //     const dataSource = await get('/perpetual/history/position', params)
//     //     console.log(dataSource, 'dataSource');
//     //     tableSource = dataSource.data
//     //     tableColumns = historyPosCol
//     // }
//     // if (params.firstStageTabs.includes('当前委托')) {
//     //     const dataSource = await get('/perpetual/current/commission')
//     //     console.log(dataSource, 'dataSource');
//     //     tableSource = dataSource.data
//     //     tableColumns = currentComCol
//     // }
//     // if (params.firstStageTabs.includes('历史委托')) {
//     //     const dataSource = await get('/perpetual/commission/history')
//     //     console.log(dataSource, 'dataSource');
//     //     tableSource = dataSource.data
//     //     tableColumns = historyCommission
//     // }
//     if (params.firstStageTabs.includes(language.tradeHistory)) {
//         // chrome.runtime.sendMessage({
//         //     type: "proxy",
//         //     method: "POST",
//         //     // url: `/user/trade/order/page`,
//         //     url: '/user/history/order/page',
//         //     body: { ...params, id: JSON.parse(localStorage.getItem('userInfo')).id }
//         //   }, (response) => {
//         //     const data = JSON.stringify(response.data)
//         //     console.log(data,'JSON.stringify(response.data)lililili');


//         //     console.log(`[代理响应/user/trade/order/page] 状态: ${response.code}, 数据: ${JSON.stringify(response.data)}`);
//         //   });
//         let timeList = params.dateTimeValue.split('~')
//         params.startTime = timeList[0]
//         params.endTime = timeList[1]
//         const dataSource = await post('/user/history/order/page', { ...params, id: JSON.parse(localStorage.getItem('userInfo')).id })
//         console.log(dataSource, 'dataSource');
//         tableSource = dataSource.data
//         tableColumns = transnRecordCol
//     }
//     // if (params.firstStageTabs.includes('资金流水')) {
//     //     const dataSource = await get('/perpetual/capital/flow')
//     //     console.log(dataSource, 'dataSource');
//     //     tableSource = dataSource.data
//     //     tableColumns = capitalFloCol
//     // }
//     // if (params.firstStageTabs.includes('交易机器人')) {
//     //     const dataSource = await get('/perpetual/transaction/robot')
//     //     console.log(dataSource, 'dataSource');
//     //     tableSource = dataSource.data
//     //     tableColumns = tradingPerRobotCol
//     // }
//     console.log(tableSource, tableColumns, 'tableSource, tableColumnswaiwaiwai');

//     return { tableSource, tableColumns }
// }